<template>
  <div>
    <Header/>
    <van-tabs v-model="active" class="tabs" line-height="0" title-active-color="#cf4173" line-width="0">
      <van-tab :title="item.name" :name="item.tid" v-for="item in types" :key="item.tid" class="tab">
        <div class="to">
          <router-link to="/">首页</router-link>>{{item.name}}
        </div>
        <div class="products">
          <div class="pro-card" v-for="ite in products" :key="ite.pid">
            <span class="state" v-show="ite.labels==0?false:true">{{ite.labels}}</span>
            <div class="imga" @click="goDetails(ite.pid)">
              <img :src="JSON.parse(ite.picture)">
            </div>
            <div class="text">{{ite.name}}</div>
            <span class="price">￥{{ite.pirce}}.00</span>
            <div class="btn" @click="goDetails(ite.pid)">
              <span class="iconfont icon-shangpin"></span>
              立即购买
            </div>
          </div>
        </div>
      </van-tab>
    </van-tabs>
    <Footer/>  
  </div>
</template>
<script>
import Footer from '../components/Footer.vue'
import Header from '../components/Header.vue'
export default {
  components: { Header, Footer },
  data() {
    return {
      active:null,
      types:[],
      products:[],
      // show:false
    }
  },
  mounted () {
    this.getType()
    this.getProducts()
  },
  updated () {
    this.getProducts()
  },
  methods: {
    getType() {
      window.scrollTo(0,0)
      this.active=this.$store.state.tid
      this.types=this.$store.state.Types
    },
    getProducts() {
      this.axios.get(`/index/products?tid=${this.active}`).then(res=>{
        this.products=res.data.data
      })
    },
    goDetails(pid){
      this.$router.push(`/details/${pid}`)
      // this.$store.commit('getPid',pid)
    }
  },
  watch: {
    active(newValue, oldValue) {
      let tid=newValue
      this.$store.commit('getTid',tid)
    }
  },
}
</script>
<style scoped lang="scss">
.tabs{
  margin:45px auto;
  text-align: center;
  .tab{
    .to{
      text-align: left;
      margin-left: 50px;
      font-size: 14px;
      a{
        color: black;
      }
    }
    .products{  
      width: 98%;
      margin: 0 auto;
      display: flex;
      flex-wrap: wrap;
      .pro-card{
        width: 48%;
        margin-top: 15px;
        margin-left: 1%;
        position: relative;
        .state{
          background-color: black;
          color: white;
          display: block;
          padding: 5px;
          width: 16%;
          font-size: 12px;
          position: absolute;
          top: 20px;
          left:20px;
        }
        .imga{
          width: 100%;
          img{
            width: 100%;
          }
        }
        .text{
          height: 35px;
          line-height: 20px;
          margin-bottom: 10px;
          font-size: 14px;
          font-weight: bold;
        }
        .btn{
          margin-top: 10px;
          text-align: center;
          background-color: black;
          color: white;
          width: 50%;
          padding:5px;
          font-size: 14px;
          border-radius: 5px;
          margin-left: 23%;
          span{
            color:white
          }
        }
      }
    }
  }
}
</style>